<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }

        #rootDiv {
            position: relative;
            overflow: hidden;
        }

        #bgImg {
            width: 100%;
            height: 100%;
        }

        #gameFactory {
            position: absolute;
            bottom: 10px;
            width: 15%;
            height: 19.2%;
            top: 15%;
        }

        .gameFactoryItem {
            width: 100%;
            height: 100%;
            background-color: cyan;
            position: relative;
            border: 1px solid white;
        }

        .gameFactoryItem img {
            width: 100%;
            height: 100%;
        }

        .gameFactoryItem span {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        #moveImg {
            display: none;
            position: absolute;
            width: 100px;
            height: 72px;
        }

        /* 生命条边框 */
        .lifeborder {
            position: absolute;
            top: 18px;
            left: 245px;
            width: 120px;
            height: 30px;
        }

        /* 绿色生命条 */
        .green {
            position: absolute;
            /* border-radius: 50px; */
            height: 20px;
            top: 5px;
            width: 100px;
            left: 10px;
        }

        /* 能量条边框 */
        .energyborder {
            position: absolute;
            top: 5%;
            left: 1px;
            width: 100px;
            height: 30px;
            overflow: hidden;
        }

        /* 蓝色能量条 */
        .blue {
            position: absolute;
            height: 23px;
            top: 4px;
            left: 6px;
        }

        /* 手指div */
        .sz {
            position: absolute;
            top: 23%;
            left: 10%;
        }

        @media (min-width: 800px) {
            #gameFactory {
                top: 3%;
            }

            .energyborder {
                left: 16%;
            }
        }
    </style>

</head>

<body>
    <div id="rootDiv">
        <img id="bgImg" src="./images/bg_hkj.jpg" alt="">
        <!-- 制造工坊 -->
        <div id="gameFactory">
            <div id="bingying" class="gameFactoryItem">
                <img src="./images/shenmiao.png" alt="molichi" class="gameFactoryImg">
                <span>10</span>
            </div>
            <div id="shuren" class="gameFactoryItem">
                <img src="./images/shuren.png" alt="shuren" class="gameFactoryImg">
                <span>20</span>
            </div>
            <div id="shuren" class="gameFactoryItem">
                <img src="./images/bingying.png" alt="bingying" class="gameFactoryImg">
                <span>40</span>
            </div>
            <div id="shuren" class="gameFactoryItem">
                <img src="./images/yx.png" alt="yingxiong" class="gameFactoryImg">
                <span>60</span>
            </div>
        </div>
        <img src="./images/shuren.png" alt="" id="moveImg">
        <!-- 游戏主场景 -->
        <div id="gameScene"></div>
    </div>

    <script>

        window.onload = function () {
            // console.log(body.clientHeight);
            //建筑工厂宽高
            var factoryWidth = document.getElementById("gameFactory").offsetWidth;
            var factoryHeight = document.getElementById("gameFactory").offsetHeight;

            //背景高度
            var bgheight = document.getElementById("bgImg").offsetHeight;
            // 时间计时器
            var timeIndexNum = 0;
            //游戏是否开始
            var isStart = false;
            var config = {
                screenWidth: window.innerWidth,
                screenHeight: window.innerHeight,
                // 计算缩放系数
                scaleW: window.innerWidth / 667,
                scaleH: bgheight / 375,
                // 建筑工厂的宽高
                factoryW: factoryWidth,
                factoryH: factoryHeight,
                // 落点基地的宽高
                baseW: 95,
                baseH: 50,
                // 时间刷新间隔
                interval: 16,
                // 游戏结束时间
                timeout: 60 * 1000,
                // 兵营产兵时间间隔
                soldierInterval: 10 * 1000,
                // 兵的宽高
                soldierW: 50,
                soldierH: 50,
                // 兵的站位间隔
                soldierSpace: 20,
                // 建筑群数组
                buildingArr: [],
                // 防御方对象数组  
                defenseArr: [],
                // 攻击方对象数组
                attackArr: [],
                // 上路防御方出现的位置
                upRoadPos: { x: 315, y: 90 },
                // 下路防御方兵出现的位置
                downRoadPos: { x: 175, y: 165 },
                //上路敌方出现的起始位置和结束位置
                UpEnemyPos: [{ x: 667, y: 278 }, { x: 315, y: 90 }],
                //下路敌方出现的起始位置和结束位置
                downEnemyPos: [{ x: 547, y: 375 }, { x: 175, y: 165 }],
                //敌军走路src
                EnemySrc: ['kl', 'em', 'xxg'],
                // 敌军移动速度
                enemySpeed: 0.5,
                // 敌军血量
                // enemyBlood: 100,
                //骷髅兵血量
                kulouBlood: 50,
                //恶魔兵血量
                emoBlood: 100,
                //吸血鬼血量
                xixueguiBlood: 250,

                // 敌军攻击力
                enemyOutput: 30,
                // 弓箭手的射程
                gjsRange: 100,
                // 弓箭手血量
                gjsBlood: 100,
                // 弓箭手攻击力
                gjsOutput: 30,
                // 弓箭手的射击间隔
                gjsAttackTime: 1000,
                // 敌军的攻击范围
                attackRange: 20,
                // 敌军的攻击间隔
                enemyAttackTime: 1000,
                // 道路的x/y
                roadRate: 1.8,
                //能量每次增加值
                energyjia: 2,
                //能量条最大显示宽度
                energywidth: 90,
                //当前能量值
                energynumber: 10,
                //城墙血量
                wallnum: 2000,
                //城墙初始宽度
                wallwidth: 100,
                //建造魔力池需要消耗的能量
                molichi: 10,
                //建造战争古树需要消耗的能量
                shuren: 20,
                //建造兵营需要的能量
                bingying: 40,
                //召唤德鲁伊需要的能量
                yingxiong: 60,

                // 箭的对象池
                jianPool: {
                    // 飞行中的箭
                    flyPool: [],
                    // 对象池中的箭
                    recoverPool: [],
                    // 箭的飞行速度
                    flySpeed: 1.5
                },
                // 英雄的攻击间隔时间
                yingxiongTime: 2 * 1000,
                // 英雄攻击距离
                yingxiongRange: 200,
                // 英雄的攻击力
                yingxiongOutput: 30,
                //树人的攻击力
                shurenOutput: 20,

            }

            // 上路的领头敌人
            var upRoadEnemy = null;
            var downRoadEnemy = null;

            var rootDiv = document.getElementById('rootDiv');
            var moveImg = document.getElementById('moveImg');

            // console.log(config.scaleW)
            // 所有放置位置的坐标(从右往左);
            // var jianzhuPos = [{ x: 428, y: 83 }, { x: 538, y: 135 }, { x: 253, y: 135 }, { x: 356, y: 187 }, { x: 457, y: 240 }, { x: 120, y: 200 }, { x: 215, y: 255 }, { x: 305, y: 300 }, { x: 117, y: 298 }];
            var jianzhuPos = [{ x: 428 * config.scaleW, y: 83 * config.scaleH }, { x: 538 * config.scaleW, y: 135 * config.scaleH }, { x: 253 * config.scaleW, y: 135 * config.scaleH }, { x: 356 * config.scaleW, y: 187 * config.scaleH }, { x: 457 * config.scaleW, y: 240 * config.scaleH }, { x: 120 * config.scaleW, y: 200 * config.scaleH }, { x: 215 * config.scaleW, y: 255 * config.scaleH }, { x: 305 * config.scaleW, y: 300 * config.scaleH }, { x: 117 * config.scaleW, y: 298 * config.scaleH }];

            // console.log(window.innerHeight)
            // if (window.innerWidth >= 812) {
            //     config.scaleH = bgheight/375;
            //     jianzhuPos = [{ x: 428 * config.scaleW, y: 83 * config.scaleH }, { x: 538 * config.scaleW, y: 135 * config.scaleH }, { x: 253 * config.scaleW, y: 135 * config.scaleH }, { x: 356 * config.scaleW, y: 187 * config.scaleH }, { x: 457 * config.scaleW, y: 240 * config.scaleH }, { x: 120 * config.scaleW, y: 200 * config.scaleH }, { x: 215 * config.scaleW, y: 255 * config.scaleH }, { x: 305 * config.scaleW, y: 300 * config.scaleH }, { x: 117 * config.scaleW, y: 298 * config.scaleH }];

            // }

            // 判断是否是有效的拖放结束
            var touchEndFlag = false;

            //主城血量条
            var wallbar;

            //能力值
            var energybar;
            //能力值数值
            var energylab;
            // var energynumber = 0;

            Wallblood();
            Energy();
            shouzhi();

            //手指动画计时器
            var szupdata;
            //手指div
            var sz;
            //手指拖动指示
            function shouzhi() {
                sz = document.createElement("div");
                sz.setAttribute("class", "sz");
                rootDiv.appendChild(sz);

                var img = new Image();
                img.src = "./images/shouzhi.png";
                img.style.width = " 50%";
                sz.appendChild(img);

                var sztop = sz.offsetTop;
                var szleft = sz.offsetLeft;
                //移动状态
                var isup = false;
                console.log(sztop);
                szupdata = setInterval(() => {
                    if (isup) {
                        sztop -= 1.5;
                        szleft -= 1;
                    } else {
                        sztop += 1.5;
                        szleft += 1;
                    }
                    if (sztop >= 220 * config.scaleH) {
                        isup = true;
                    }
                    if (sztop <= 87 * config.scaleH) {
                        isup = false;
                    }
                    sz.style.top = sztop + 'px';
                    sz.style.left = szleft + 'px';

                    // console.log("aaa")
                }, 30)
            }


            //创建主城血量条
            function Wallblood() {
                var a = 158;
                var b = 352;
                var c;
                c = Math.sqrt((a * a + b * b));
                console.log(c);

                var framediv = document.createElement("div");
                framediv.setAttribute("class", "lifeborder");
                rootDiv.appendChild(framediv);

                // var img = new Image();
                // img.src = "./images/black.png";
                // img.setAttribute("class", "green");
                // framediv.appendChild(img);

                //生命值进度条
                wallbar = new Image();
                wallbar.src = "./images/green.png";
                wallbar.setAttribute("class", "green");
                wallbar.style.width = config.wallwidth + "px";
                wallbar.value = config.wallnum;
                framediv.appendChild(wallbar);

                //生命值边框
                var img3 = new Image();
                img3.src = "./images/frame.png";
                img3.width = 120;
                img3.height = 30;
                img3.style.position = "absolute";
                img3.style.overflow = "hidden";
                framediv.appendChild(img3);
            }


            //创建能量条
            function Energy() {
                var framediv = document.createElement("div");
                framediv.setAttribute("class", "energyborder");
                rootDiv.appendChild(framediv);

                //蓝色进度条
                energybar = new Image();
                energybar.src = "./images/blue.png";
                energybar.setAttribute("class", "blue");
                energybar.width = 0;
                framediv.appendChild(energybar);

                //能量条边框
                var img3 = new Image();
                img3.src = "./images/energy.png";
                img3.width = 100;
                img3.height = 30;
                img3.style.position = "absolute";
                img3.style.left = "0px";
                framediv.appendChild(img3);

                //能量数值
                energylab = document.createElement("div");
                energylab.innerText = config.energynumber + '';
                energylab.style.position = "absolute";
                energylab.style.color = "#ffff";
                energylab.style.lineHeight = "27px";
                energylab.style.width = "100px";
                energylab.style.textAlign = "center";
                framediv.appendChild(energylab);
            }

            rootDiv.addEventListener('touchmove', function (e) {
                var ele = e.target;
                if (ele.className == 'gameFactoryImg') {
                    touchEndFlag = ele;
                    // 拖动的是建筑
                    var pageX = e.targetTouches[0].pageX;
                    var pageY = e.targetTouches[0].pageY;
                    // console.log(pageX, pageY);
                    moveImg.style.display = 'block';
                    moveImg.style.left = (pageX - config.factoryW / 2) + 'px';
                    moveImg.style.top = (pageY - config.factoryH / 2) + 'px';
                    moveImg.src = ele.src;
                }
            })
            rootDiv.addEventListener('touchend', function (e) {
                if (touchEndFlag) {
                    moveImg.style.display = 'none';
                    var pageX = e.changedTouches[0].pageX;
                    var pageY = e.changedTouches[0].pageY;
                    for (var i = 0; i < jianzhuPos.length; i++) {
                        var react = jianzhuPos[i];
                        var x = react.x;
                        var y = react.y;
                        var w = react.x + config.baseW;
                        var h = react.y + config.baseH;

                        //是否能添加建筑
                        var isbuding = false;
                        if (pageX > x && pageY > y && pageX < w && pageY < h) {
                            // 判断当前位置是否已经有建筑
                            if (!config.buildingArr[i]) {
                                var imgX = react.x;
                                var imgY = react.y - config.baseH / 2;

                                // 攻击或者产生兵的周期(默认我10s)
                                var cycle = 3 * 1000;
                                if (touchEndFlag.alt == 'molichi' && config.energynumber >= config.molichi) {
                                    //判断游戏是否开始
                                    if(!isStart){
                                        //移除手指计时器
                                        clearInterval(szupdata);
                                        sz.style.display = "none";
                                        //开启游戏心跳
                                        gamestart();

                                    }
                                    config.energynumber -= config.molichi;
                                    molichi();
                                    // 增加魔力
                                    cycle = 1 * 1000;
                                    isbuding = true;
                                } else if (touchEndFlag.alt == 'shuren' && config.energynumber >= config.shuren) {
                                    config.energynumber -= config.shuren;
                                    molichi();
                                    // 神树攻击
                                    cycle = 3 * 1000;
                                    isbuding = true;
                                } else if (touchEndFlag.alt == 'bingying' && config.energynumber >= config.bingying) {
                                    config.energynumber -= config.bingying;
                                    molichi();
                                    // 兵营
                                    cycle = 10 * 1000;
                                    isbuding = true;
                                } else if (touchEndFlag.alt == 'yingxiong' && config.energynumber >= config.yingxiong) {
                                    config.energynumber -= config.yingxiong;
                                    molichi();
                                    // 英雄
                                    cycle = config.yingxiongTime;
                                    isbuding = true;
                                    // img.src = "./images/wwsz_rw.gif"
                                }
                                if (isbuding) {
                                    var img = getABbuilding(touchEndFlag.src, imgX, imgY);
                                    rootDiv.appendChild(img);
                                    config.buildingArr[i] = { type: touchEndFlag.alt, img: img, id: i, time: 0, cycle: cycle, x: imgX, y: imgY, isattack: false };
                                }

                            }
                        }
                    }
                    touchEndFlag = false;
                }
            })

            function getABbuilding(src, x, y) {
                var img = new Image();
                img.width = config.factoryW;
                img.height = config.factoryH;
                img.style.position = 'absolute';
                img.style.left = x + 'px';
                img.style.top = y + 'px';
                img.src = src;
                return img;
            }

            function getASoldier(x, y) {
                // 根据类型获取兵种
                var img = new Image();
                img.width = config.soldierW;
                img.height = config.soldierH;
                img.style.position = 'absolute';
                img.style.left = x + 'px';
                img.style.top = y + 'px';
                img.src = './images/gjs.gif';
                // rootDiv.appendChild(img);
                // config.buildingArr[i] = img;
                return img;
            }

            //改变魔力值的宽度和数值
            function molichi() {
                energybar.width >= config.energywidth ? energybar.width = config.energywidth : energybar.width = config.energynumber / config.energyjia;
                energylab.innerText = config.energynumber + '';
            }

            function updateBuilding() {
                // 遍历所有的已创建的兵工厂
                for (var i = 0; i < config.buildingArr.length; i++) {
                    var building = config.buildingArr[i];
                    if (!building) {
                        continue;
                    }
                    building.time += config.interval;
                    if (!(building.time >= building.cycle)) {
                        continue;
                    }
                    // 周期完成一次后,清空计数
                    building.time = 0;
                    if (building.type == 'molichi') {
                        // 增加魔力
                        // console.log("增加10魔力值");
                        config.energynumber += config.energyjia;
                        molichi();

                    } else if (building.type == 'shuren') {
                        // 神树攻击
                        // console.log('神树攻击一次');
                        // 先计算两路领军者距离英雄的位置
                        var upDis = 10000;
                        var downDis = 10000;
                        if (config.upRoadEnemy) {
                            upDis = Math.sqrt(Math.pow(building.x - config.upRoadEnemy.x, 2) + Math.pow(building.y - config.upRoadEnemy.y, 2));
                        }
                        if (config.downRoadEnemy) {
                            downDis = Math.sqrt(Math.pow(building.x - config.downRoadEnemy.x, 2) + Math.pow(building.y - config.downRoadEnemy.y, 2));
                        }
                        var minDis = 10000;
                        // 攻击对象
                        var obj = null;
                        if (upDis < downDis) {
                            minDis = upDis;
                            obj = config.upRoadEnemy;
                        } else {
                            minDis = downDis;
                            obj = config.downRoadEnemy;
                        }

                        if (minDis >= 10000) {
                            return;
                        }
                        if (minDis < config.yingxiongRange) {
                            // 可以发起攻击
                            //判断是否处于攻击状态
                            if (!building.isattack) {
                                building.img.src = "./images/zzgs_gj.gif";
                                building.img.width = 80;
                                building.img.style.left = parseInt(building.img.style.left) + 10 + 'px';
                                building.isattack = true;
                            }

                            // 添加动画
                            var img = new Image();
                            img.width = config.soldierW;
                            img.height = config.soldierH;
                            img.style.position = 'absolute';
                            img.style.left = obj.x + 'px';
                            img.style.top = obj.y + 'px';
                            // img.src = './images/xhs_dm.gif';
                            img.src = "./images/wwsz_tm.gif";
                            rootDiv.appendChild(img);
                            setTimeout(() => {
                                rootDiv.removeChild(img);
                                // img.src = './images/xhs_dm.gif';
                                obj.blood -= config.shurenOutput;
                                if (obj.blood <= 0) {
                                    // 死亡
                                    removeEnemy(obj);

                                }
                                // building.img.src ="./images/yx.png";
                            }, 500);
                        }

                    } else if (building.type == 'bingying') {
                        // 兵营,产出一个兵
                        console.log('兵营,产出一个兵');
                        // 建筑的下标
                        var id = building.id;
                        // 兵出现的上下路
                        var road = 'upRoad';
                        if (id <= 1) {
                            // 上面两个, 兵出现在上方道路
                        } else if (id <= 4) {
                            // 中间三个, 兵随机出现在两条道路
                            road = (Math.random() > 0.5 ? 'upRoad' : 'downRoad');
                        } else {
                            // 下方四个, 兵出现在下方道路
                            road = 'downRoad';
                        }
                        var lastSolider = false;
                        for (var i = 0; i < config.defenseArr.length; i++) {
                            var solider = config.defenseArr[i];
                            if (solider && solider.type == road) {
                                lastSolider = solider;
                            }
                        }
                        // 兵出现的默认位置
                        var x = road == 'upRoad' ? config.upRoadPos.x * config.scaleW : config.downRoadPos.x * config.scaleW;
                        var y = road == 'upRoad' ? config.upRoadPos.y * config.scaleH : config.downRoadPos.y * config.scaleH;
                        if (lastSolider) {
                            // 如果新兵前面有兵.则需要计算其位置
                            x = lastSolider.x + config.soldierSpace;
                            y = lastSolider.y + config.soldierSpace / config.roadRate;
                        }

                        var newSolider = getASoldier(x, y - config.soldierW / 2);
                        // 添加到显示列表;
                        rootDiv.appendChild(newSolider);
                        // 添加到防御兵数组中

                        config.defenseArr.push({ type: road, img: newSolider, x: x, y: y, blood: config.gjsBlood, attackTime: 0, output: config.gjsOutput })
                    } else if (building.type == 'yingxiong') {
                        // 英雄攻击
                        console.log("英雄攻击")
                        // 先计算两路领军者距离英雄的位置
                        var upDis = 10000;
                        var downDis = 10000;
                        if (config.upRoadEnemy) {
                            upDis = Math.sqrt(Math.pow(building.x - config.upRoadEnemy.x, 2) + Math.pow(building.y - config.upRoadEnemy.y, 2));
                        }
                        if (config.downRoadEnemy) {
                            downDis = Math.sqrt(Math.pow(building.x - config.downRoadEnemy.x, 2) + Math.pow(building.y - config.downRoadEnemy.y, 2));
                        }

                        var minDis = 10000;
                        // 攻击对象
                        var obj = null;
                        if (upDis < downDis) {
                            minDis = upDis;
                            obj = config.upRoadEnemy;
                        } else {
                            minDis = downDis;
                            obj = config.downRoadEnemy;
                        }

                        if (minDis >= 10000) {
                            return;
                        }

                        if (minDis < config.yingxiongRange) {
                            // 可以发起攻击
                            //判断是否处于攻击状态
                            if (!building.isattack) {
                                building.img.src = "./images/wwsz_rw.gif";
                                building.isattack = true;
                            }

                            // 添加动画
                            var img = new Image();
                            img.width = config.soldierW;
                            img.height = config.soldierH;
                            img.style.position = 'absolute';
                            img.style.left = obj.x + 'px';
                            img.style.top = obj.y + 'px';
                            img.src = './images/wwsz_tm.gif';
                            // img.src = "./images/shuren.png";
                            rootDiv.appendChild(img);
                            setTimeout(() => {
                                rootDiv.removeChild(img);
                                obj.blood -= config.yingxiongOutput;
                                if (obj.blood <= 0) {
                                    // 死亡
                                    removeEnemy(obj);
                                }
                                // building.img.src ="./images/yx.png";
                            }, 500);
                        }

                    }
                }
            }

            var timeEnemy = 0;
            //判断生成的是弟几波兵
            var armynum = 0;
            function updateAttack() {
                timeEnemy += config.interval;
                if (timeEnemy % (6 * 1000) == 0 && timeEnemy >= (10 * 1000)) {
                    // 随机产生一个敌军并显示
                    var enemy = Math.random() > 0.5 ? 'upRoad' : 'downRoad';
                    var x = enemy == "upRoad" ? config.UpEnemyPos[0].x * config.scaleW : config.downEnemyPos[0].x * config.scaleW;
                    var y = enemy == "upRoad" ? config.UpEnemyPos[0].y * config.scaleH : config.downEnemyPos[0].y * config.scaleH;

                    armynum++;
                    var src = 'kl';
                    var blood;
                    if (armynum <= 3) {
                        //骷髅兵
                        src = config.EnemySrc[0];
                        blood = config.kulouBlood;
                    } else if (armynum <= 6) {
                        //恶魔兵
                        src = config.EnemySrc[1];
                        blood = config.emoBlood;
                    } else {
                        //吸血鬼
                        src = config.EnemySrc[2];
                        blood = config.xixueguiBlood;
                    }
                    var newEnemy = getEnemy(x, y, src);
                    // 添加到显示列表;
                    rootDiv.appendChild(newEnemy);
                    // 添加到敌军数组中
                    var obj = { type: enemy, img: newEnemy, x: x, y: y - config.soldierW / 2, blood: blood, src: src, iswalk: true, output: config.enemyOutput, time: 0 };
                    config.attackArr.push(obj)
                    // 为领头敌军赋值
                    if (enemy == 'upRoad' && !config.upRoadEnemy) {
                        config.upRoadEnemy = obj;
                    } else if (enemy == 'downRoad' && !config.downRoadEnemy) {
                        config.downRoadEnemy = obj;
                    }
                }
                // 弓箭手需要攻击
                for (var i = 0; i < config.defenseArr.length; i++) {
                    var defenser = config.defenseArr[i];
                    defenser.attackTime += config.interval;
                    if (defenser.attackTime >= config.gjsAttackTime) {
                        // 弓箭手需要攻击
                        if (defenser.type == 'upRoad' && config.upRoadEnemy && (defenser.x + config.gjsRange >= config.upRoadEnemy.x)) {
                            // 开始攻击上路敌人
                            console.log('开始攻击上路敌人');
                            defenser.attackTime = 0;
                            var jian = createAJian(defenser);
                            rootDiv.appendChild(jian);


                        } else if (defenser.type == 'downRoad' && config.downRoadEnemy && (defenser.x + config.gjsRange >= config.downRoadEnemy.x)) {
                            // 开始攻击下路敌人
                            console.log('开始攻击下路敌人');
                            defenser.attackTime = 0;
                            var jian = createAJian(defenser);
                            rootDiv.appendChild(jian);
                        }
                    }
                }
                for (var i = 0; i < config.attackArr.length; i++) {
                    Tween(config.attackArr[i]);
                }
            }
            //创建敌军
            function getEnemy(x, y, src) {
                var img = new Image();
                img.width = config.soldierW;
                img.height = config.soldierH;
                img.style.position = 'absolute';
                img.style.left = x + 'px';
                img.style.top = y + 'px';
                img.src = './images/' + src + '_zl.gif';
                // img.src = "./images/shuren.png";
                return img;
            }
            // 创建一直箭
            function createAJian(defenser) {
                var img = null;
                if (config.jianPool.recoverPool.length) {
                    // 从对象池里获取
                    img = config.jianPool.recoverPool.splice(0, 1)[0].img;
                } else {
                    var img = new Image();
                    img.width = 100;
                    img.height = 13;
                    img.style.position = 'absolute';
                    img.src = './images/jian.png';
                    img.style.transform = 'rotate(30deg)';
                }
                img.style.left = defenser.x + 'px';
                img.style.top = defenser.y + 'px';
                var obj = { img: img, type: defenser.type, x: defenser.x, y: defenser.y, output: config.gjsOutput };
                config.jianPool.flyPool.push(obj);
                return img;
            }

            //缓动动画
            function Tween(enemyObj) {
                var lastSolider = false;
                for (var i = 0; i < config.defenseArr.length; i++) {
                    var solider = config.defenseArr[i];
                    if (solider && solider.type == enemyObj.type) {
                        lastSolider = solider;
                    }
                }
                // 敌军兵出现的默认位置
                if (!lastSolider) {
                    lastSolider = { x: enemyObj.type == 'upRoad' ? config.upRoadPos.x * config.scaleW : config.downRoadPos.x * config.scaleW };
                }

                // console.log(enemyObj.x - config.attackRange);
                if (enemyObj.x - config.attackRange <= lastSolider.x) {
                    // 进入到敌军的攻击范围,应
                    if (enemyObj.iswalk) {
                        enemyObj.img.src = './images/' + enemyObj.src + '_gj.gif';
                        enemyObj.img.width = 70;
                        enemyObj.img.height = 70;
                        enemyObj.iswalk = false;
                        // 攻击防守兵
                    }
                    // 时刻刷新攻击
                    enemyAttack(enemyObj);
                    // 停止走路
                    return;
                } else {
                    enemyObj.x -= config.enemySpeed;
                    enemyObj.y -= config.enemySpeed / config.roadRate;
                    enemyObj.img.style.left = enemyObj.x + 'px';
                    enemyObj.img.style.top = enemyObj.y + 'px';
                    if (!enemyObj.iswalk) {
                        enemyObj.img.src = './images/' + enemyObj.src + '_zl.gif';
                        enemyObj.iswalk = true;
                    }
                }
            }
            // 敌军攻击
            function enemyAttack(enemy) {
                if (!enemy.iswalk) {
                    var type = enemy.type;
                    // 找到当前路上的最后一个防守兵
                    var isExist = -1;
                    for (var i = 0; i < config.defenseArr.length; i++) {
                        if (config.defenseArr[i].type == type) {
                            isExist = i;
                        }
                    }
                    enemy.time += config.interval;
                    if (enemy.time >= config.gjsAttackTime) {
                        if (isExist >= 0) {
                            // 攻击防守兵
                            var gjs = config.defenseArr[isExist];
                            // 开始攻击
                            gjs.blood -= enemy.output;
                            if (gjs.blood <= 0) {
                                // 移除弓箭手
                                removeGjs(isExist);
                            }
                        } else {
                            // 攻击城墙
                            config.wallnum -= enemy.output;
                            wallbar.style.width = config.wallnum * (config.wallwidth / wallbar.value) + "px";
                            // console.log(wallbar.style.width);
                            if (config.wallnum <= 0) {
                                console.log("游戏结束")
                            }

                        }
                        enemy.time = 0;
                    }
                }
            }
            // 实时更新箭的逻辑
            function updateJian() {
                for (var i = 0; i < config.jianPool.flyPool.length; i++) {
                    var jian = config.jianPool.flyPool[i];
                    if (jian) {
                        jian.x += config.jianPool.flySpeed;
                        // jian.y += 
                        jian.y += config.jianPool.flySpeed / config.roadRate;
                        jian.img.style.left = jian.x + 'px';
                        jian.img.style.top = jian.y + 'px';


                        if (jian.type == 'upRoad' && config.upRoadEnemy && jian.x >= config.upRoadEnemy.x) {
                            // 敌人被攻击到, 先移除箭
                            rootDiv.removeChild(jian.img);
                            config.jianPool.recoverPool.push(config.jianPool.flyPool.splice(i, 1)[0]);
                            // 怪物开始减血,然后判断是否死亡!
                            config.upRoadEnemy.blood -= jian.output;
                            if (config.upRoadEnemy.blood <= 0) {
                                // 敌军战死
                                removeEnemy(config.upRoadEnemy);
                            }

                        } else if (jian.type == 'downRoad' && config.downRoadEnemy && jian.x >= config.downRoadEnemy.x) {
                            rootDiv.removeChild(jian.img);
                            config.jianPool.recoverPool.push(config.jianPool.flyPool.splice(i, 1)[0]);
                            // 怪物开始减血,然后判断是否死亡!
                            config.downRoadEnemy.blood -= jian.output;
                            if (config.downRoadEnemy.blood <= 0) {
                                // 敌军战死
                                removeEnemy(config.downRoadEnemy);
                            }
                        }
                    }
                }
            }
            // 移除敌军
            function removeEnemy(enemy) {
                rootDiv.removeChild(enemy.img);
                // 设置iswalk的值为了不让其继续攻击守军
                enemy.iswalk = true;
                var type = enemy.type;
                // 先从数组中移除
                for (var i = 0; i < config.attackArr.length; i++) {
                    if (config.attackArr[i].type == type) {
                        config.attackArr.splice(i, 1);
                        break;
                    }
                }
                // 然后重新给敌军设立领导者
                var isExist = null;
                for (var i = 0; i < config.attackArr.length; i++) {
                    if (config.attackArr[i].type == type) {
                        isExist = config.attackArr[i];
                        break;
                    }
                }

                if (enemy.type == 'upRoad') {
                    // 上路领导敌军
                    if (isExist) {
                        config.upRoadEnemy = isExist;
                    } else {
                        config.upRoadEnemy = null;
                    }
                } else if (enemy.type == 'downRoad') {
                    // 下路领导敌军
                    if (isExist) {
                        config.downRoadEnemy = isExist;
                    } else {
                        config.downRoadEnemy = null;
                    }
                }
            }
            // 移除弓箭手
            function removeGjs(i) {
                var gjs = config.defenseArr[i];
                rootDiv.removeChild(gjs.img);
                config.defenseArr.splice(i, 1);

            }


            function gamestart() {
                var timeIndex = setInterval(() => {
                    // 遍历所有的已创建的建筑物
                    updateBuilding();
                    // 遍历所有的兵
                    updateAttack();
                    // 遍历所有的箭簇
                    updateJian();
                    timeIndexNum += config.interval;
                    if (timeIndexNum >= config.timeout) {
                        alert('游戏结束!');
                        clearInterval(timeIndex)
                    }
                }, config.interval);
            }

        }



    </script>
</body>

</html>